<template>
	<view class="container" :style="{height:`calc(100vh - ${height}px)`}">
		<Header title="中国【西部】健康食品博览会"></Header>
		<view class="wapper">
			<!-- 轮播图 -->
			<view class="banner">
				<u-swiper :list="bannerList" height="185" mode="dot"></u-swiper>
			</view>
			<!-- 导航 -->
			<view class="navs">
				<view class="item" v-for="(v,k) in navs" :key="v.name" @click="toUrl(v,k)">
					<view class="icon">
						<image :src="v.url" mode="widthFix"></image>
					</view>
					<view class="name">
						{{v.name}}
					</view>
				</view>
			</view>
			<!-- 展会地图 -->
			<view class="map">
				<view class="map-title">
					<view class="map-title-icon">
						<image src="../../static/icons/info.png" mode="widthFix"></image>
					</view>
					<view class="map-title-text">
						展会地图
					</view>
				</view>
				<view class="map-content">
					<image class="mapd" src="@/static/new/d.png" mode="widthFix"></image>
					<image class="mapc" src="@/static/new/c.png" mode="widthFix"></image>
					<view class="item" v-for="(v,k) in mapItems" :key="k" :style="{left:v.left+'rpx',top:v.top+'rpx'}" @click="toStore(v)">
						<image :src="v.src" mode="widthFix" :style="{width:v.width + 'rpx'}"></image>
					</view>
				</view>
			</view>
			<!-- 咨询 -->
			<!-- <view class="infos">
				<view class="infos_title">
					<view class="infos_title_left">
						<image class="infos_title_icon" src="@/static/icons/info.png" mode="widthFix"></image>
						资讯
					</view>
					<view class="more" @click="switchTab">
						更多...
					</view>
				</view>
				<view class="infos_item" v-for="(v,k) in infoList" :key="k" @click="toDetail(v)">
					<view class="infos_item_left">
						<view class="infos_item_left_top">
							{{v.ZiXunTitle}}
						</view>
						<view class="infos_item_left_bottom">
							{{v.AddDate}}
						</view>
					</view>
					<view class="infos_item_right">
						<image :src="getUrl(v.ZiXunImageUrl)"></image>
					</view>
				</view>
			</view> -->
			<!-- 咨询 -->
			<view class="banners">
				<view class="stores_title">
					<view class="stores_title_left">
						<view class="stores_title_icon">
							<image src="@/static/icons/store.png" mode="widthFix"></image>
						</view>
						展台照片
					</view>
					<view class="more" @click="toPics">
						更多...
					</view>
				</view>
				<u-swiper :list="centerList" imgMode="aspectFill" height="200" mode="dot" @click="toCompany"></u-swiper>
			</view>
			<!-- 商家 -->
			<!-- 	<view class="stores">
				<view class="stores_title">
					<view class="stores_title_left">
						<view class="stores_title_icon">
							<image src="@/static/icons/store.png" mode="widthFix"></image>
						</view>
						优选展商
					</view>
					<view class="more" @click="toNav('nav6')">
						更多...
					</view>
				</view>
				<view class="stores_list">
					<view class="stores_item" v-for="(v,k) in storeList" :key="k" @click="toStore(v)">
						<view class="stores_item_top">
							<image :src="getUrl(v.ImageUrl)"></image>
						</view>
						<view class="stores_item_bottom">
							<view class="stores_item_bottom_left">
								<view class="stores_item_bottom_left_top">
									{{v.ZhangShangName}}
								</view>
								<view class="stores_item_bottom_left_bottom">
									<view class="stores_item_bottom_left_bottom_place">
										{{v.ZhangShangSeat}}
									</view>
									<view class="stores_item_bottom_left_bottom_num">
										{{v.ZhangShangID}}
									</view>
								</view>
							</view>
							<view class="stores_item_bottom_right">
								<image src="@/static/icons/collect.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- 展品 -->
			<!-- <view class="stores">
				<view class="stores_title">
					<view class="stores_title_left">
						<view class="stores_title_icon">
							<image src="@/static/icons/store.png" mode="widthFix"></image>
						</view>
						优选展品
					</view>
					<view class="more" @click="toNav('nav7')">
						更多...
					</view>
				</view>
				<view class="stores_list">
					<view class="stores_item" v-for="(v,k) in productList" :key="k" @click="toDetail(v)">
						<view class="stores_item_top">
							<image :src="getUrl(v.ImageUrl)"></image>
						</view>
						<view class="stores_item_bottom">
							<view class="stores_item_bottom_left">
								<view class="stores_item_bottom_left_top">
									{{v.ZhanPinName}}
								</view>

							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import Header from '@/components/haeder.vue'
	import banner1 from '@/static/banner/banner1.png'
	import nav1 from '@/static/navs/nav1.png'
	import nav2 from '@/static/navs/nav2.png'
	import nav3 from '@/static/navs/nav3.png'
	import nav4 from '@/static/navs/nav4.png'
	import nav5 from '@/static/navs/nav5.png'
	import nav6 from '@/static/navs/nav6.png'
	import nav7 from '@/static/navs/nav7.png'
	import nav8 from '@/static/navs/nav8.png'
	import src1 from '@/static/new/item1.png'
	import src2 from '@/static/new/item2.png'
	import src3 from '@/static/new/item3.png'
	import src4 from '@/static/new/item4.png'
	import src5 from '@/static/new/item5.png'
	import src6 from '@/static/new/item6.png'
	import src7 from '@/static/new/item7.png'
	import src8 from '@/static/new/item8.png'
	import src9 from '@/static/new/item9.png'
	import src10 from '@/static/new/item10.png'
	import src11 from '@/static/new/item11.png'
	export default {
		components: {
			Header
		},
		data() {
			return {
				bannerList: [
					banner1
				],
				mapItems: [{
						src: src1,
						id:1,
						left: 100,
						top: 70,
						width: 217
					},
					{
						src: src2,
						id:2,
						left: 400,
						top: 70,
						width: 216
					},
					{
						src: src3,
						id:3,
						left: 0,
						top: 340,
						width: 160
					},
					{
						src: src4,
						id:4,
						left: 180,
						top: 340,
						width: 160
					},
					{
						src: src5,
						id:5,
						left: 420,
						top: 300,
						width: 216
					},
					{
						src: src6,
						id:0,
						left: 100,
						top: 630,
						width: 197
					},
					{
						src: src7,
						id:6,
						left: 420,
						top: 580,
						width: 219
					},
					{
						src: src8,
						id:7,
						left: 100,
						top: 820,
						width: 219
					},
					{
						src: src9,
						id:8,
						left: 380,
						top: 820,
						width: 310
					},
					{
						src: src10,
						id:9,
						left: 100,
						top: 1050,
						width: 235
					},
					{
						src: src11,
						id:10,
						left: 420,
						top: 1050,
						width: 232
					},
				],
				navs: [{
						name: '展会报名',
						url: nav1,
						route: 'nav5'
					},
					{
						name: '展商名录',
						url: nav2,
						route: 'nav6'
					},
					{
						name: '资料下载',
						url: nav3,
						route: 'nav3'
					},
					{
						name: '直播中心',
						url: nav4,
						route: 'nav8'
					},
					// {
					// 	name: '展会报名',
					// 	url: nav5
					// },
					// {
					// 	name: '展商名录',
					// 	url: nav6
					// },
					// {
					// 	name: '展品信息',
					// 	url: nav7
					// },
					// {
					// 	name: '直播中心',
					// 	url: nav8
					// },
				],
				height: 0,
				infoList: [],
				storeList: [],
				centerList: [],
				center: [],
				productList: []
			}
		},
		methods: {
			toDetail(v) {
				if (v.ZiXunLinkUrl) {
					window.open(v.ZiXunLinkUrl)
				} else {
					const str = encodeURIComponent(JSON.stringify({
						img: v.ImageUrl,
						head: v.ZhanPinName || v.ZiXunTitle,
						content: v.Content
					}))
					uni.navigateTo({
						url: './detail?title=资讯详情&data=' + str
					})
				}
			},
			toStore(v) {
				uni.navigateTo({
					url: '/pages/navs/nav6?data=' + v.id
				})
			},
			toCompany(v) {
				uni.previewImage({
					urls: [this.centerList[v]]
				})

			},
			switchTab() {
				uni.switchTab({
					url: './info'
				})
			},
			toUrl(v) {
				if(v.route == 'nav3') return
				uni.navigateTo({
					url: '/pages/navs/' + v.route
				})
			},
			toNav(str) {
				uni.navigateTo({
					url: '/pages/navs/' + str
				})
			},
			toPics() {
				uni.navigateTo({
					url: './waters'
				})
			},
			async init() {
				let res = await this.$api.getIndex()
				// let res2 = await this.$api.getIndexList({ZhanQuID:"9","ZhanShangName":"","Seat":"","PageSize":"","PageIndex":""})
				// this.infoList = res.UserData.HomePageZiXunList

				this.centerList = res.UserData.HomePageZhanTaiPictureList.map((v) => {
					return this.getUrl(v.ImageUrl)
				})
				this.center = res.UserData.HomePageZhanTaiPictureList
				// this.mapItems = res.UserData.HomePageZhanquList.map((v, k) => {
				// 	return {
				// 		...v,
				// 		src: src
				// 	}
				// })
				// this.storeList = res.UserData.HomoPageZhanShangList.slice(0, 2)
				// this.productList = res.UserData.HomePageZhanPinList
			},

		},
		async mounted() {
			// await this.getUser()
			this.init()


		},
		created() {
			let app = uni.getSystemInfoSync();
			this.height = app.windowBottom
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		overflow: auto;
		display: flex;
		flex-direction: column;

		.wapper {
			flex: 1;
			background: #f2f2f2;
			z-index: 100;
			margin-top: -10vh;
			border-top-left-radius: 60rpx;
			border-top-right-radius: 60rpx;

			>view {
				width: 96%;
				margin: 0 auto;
			}

			.more {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}

			.banner {
				margin: -100rpx auto 0;
			}

			.navs {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				margin-top: 40rpx;

				.item {
					width: 25%;
					text-align: center;
					margin: 19rpx 0;

					.icon {
						image {
							width: 98rpx;
							height: 98rpx;
						}
					}

					.name {
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
					}
				}
			}

			.map {
				.map-title {
					margin: 20rpx;
					display: flex;
					// justify-itemauto;
					align-items: center;

					.map-title-icon {
						width: 40rpx;

						image {
							width: 100%;
						}
					}

					.map-title-text {
						margin-left: 10rpx;
						font-size: 36rpx;
						font-family: PingFang SC;
						color: #333333;
					}
				}

				.map-content {
					position: relative;
					background: #fff;
					height: 1350rpx;
					box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(0, 0, 0, 0.3);
					border-radius: 33rpx;
					text-align: center;

					.mapd,
					.mapc {
						width: 376rpx;
					}

					.mapd {
						margin: 140rpx auto;
					}

					.mapc {
						margin-top: 100rpx;
					}

					.item {
						position: absolute;
					}
				}
			}

			.infos {
				margin: 40rpx auto;
				width: calc(96% - 40rpx);
				padding: 20rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(0, 0, 0, 0.3);
				border-radius: 33rpx;

				.infos_title {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.infos_title_left {
						display: flex;
						align-items: center;

						.infos_title_icon {
							// vertical-align: top;
							margin-right: 14rpx;
							width: 40rpx;
							height: 40rpx;
						}

						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #333333;
					}
				}

				.infos_item {
					padding: 21rpx 18rpx;
					border-bottom: 1px solid #D9D9D9;
					display: flex;
					justify-content: space-between;

					.infos_item_left {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-right: 62rpx;

						.infos_item_left_top {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						.infos_item_left_bottom {
							font-size: 18rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #999999;
						}
					}

					.infos_item_right {
						image {
							width: 223rpx;
							height: 168rpx;
						}
					}

					&:last-child {
						border: none;
					}
				}
			}

			.banners {
				margin: 40rpx auto;

				.stores_title {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					margin-bottom: 20rpx;

					.stores_title_left {
						display: flex;
						align-items: flex-end;

						.stores_title_icon {

							// vertical-align: top;
							image {
								margin-right: 14rpx;
								width: 28rpx;
								height: 40rpx;
							}
						}

						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #333333;
					}
				}
			}

			.stores {
				margin: 40rpx auto;

				.stores_title {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					margin-bottom: 20rpx;

					.stores_title_left {
						display: flex;
						align-items: flex-end;

						.stores_title_icon {

							// vertical-align: top;
							image {
								margin-right: 14rpx;
								width: 28rpx;
								height: 40rpx;
							}
						}

						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #333333;
					}
				}

				.stores_list {
					display: flex;
					flex-wrap: wrap;

					.stores_item {
						padding: 26rpx 22rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(0, 0, 0, 0.35);
						border-radius: 33rpx;
						width: 42%;
						margin-right: 19rpx;
						margin-bottom: 19rpx;

						&:nth-child(2n) {
							margin-right: 0;
						}

						.stores_item_top {
							padding: 20rpx 0;

							image {
								width: 100%;
								height: 200rpx;
							}

							border-bottom: 1px solid #000000;
						}

						.stores_item_bottom {
							margin-top: 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.stores_item_bottom_left {
								letter-spacing: 4rpx;

								.stores_item_bottom_left_top {
									font-size: 32rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #333333;
								}

								.stores_item_bottom_left_bottom {
									display: flex;

									.stores_item_bottom_left_bottom_place {
										margin-right: 32rpx;
										font-size: 24rpx;
										font-family: Source Han Sans CN;
										font-weight: 500;
										color: #333333;
									}

									.stores_item_bottom_left_bottom_num {
										font-size: 24rpx;
										font-family: Source Han Sans CN;
										font-weight: 500;
										color: #333333;
									}
								}
							}

							.stores_item_bottom_right {
								image {
									width: 36rpx;
									height: 36rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>